<!DOCTYPE html>
<html class="overflow-hidden">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="no"/>
    <meta name="wap-font-scale" content="no">
    <meta content="telephone=no" name="format-detection">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>礼仪之邦-商品分类列表</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/swiper.min.css"/>
    <link rel="stylesheet" href="css/public.css"/>
    <link rel="stylesheet" href="css/app.css"/>
</head>
<body class="overflow-hidden">
<div class="shopType-bar">
    <div class="shopType-header search-title pos-abs-tl">
        <span class="shopType-area"><i class="shopType-sprite-icon"></i>重庆</span>

        <div class="search-box">
            <i class="sprite-icon search-icon"></i>
            <input type="text" class="search-input" placeholder="输入关键字搜索商品">
        </div>
        <span class="twoCode-icon shopType-sprite-icon"></span>
    </div>

    <div class="shopType-cont">
        <div class="shopType-left swiper-container">
            <div class="shopType-menu swiper-wrapper">
                <div class="swiper-slide">
                    <a class="active" href="javascript:;">休闲食品</a>
                    <a href="javascript:;">进口食品</a>
                    <a href="javascript:;">生鲜食品</a>
                    <a href="javascript:;">粮油干货</a>
                    <a href="javascript:;">营养保健</a>
                    <a href="javascript:;">酒水饮料</a>
                    <a href="javascript:;">冲调饮料</a>
                    <a href="javascript:;">其　　他</a>
                </div>
            </div>
        </div>
        <div class="shopType-right">
            <div class="shopType-intro">
                <h2 class="tips"><a href="#"><i class="shopType-sprite-icon"></i><span>休闲食品</span> ></a></h2>

                <div class="shopType-intro-cont">
                    <div id="wrapper">
                        <div id="scroller" class="list-row">
                            <ul class="row-3 shopType">
                                <li>
                                    <a href="#"><i class="shopType-sprite-icon shop-icon1"></i>休闲零食</a>
                                </li>
                                <li>
                                    <a href="#"><i class="shopType-sprite-icon shop-icon2"></i>饼干糕点</a>
                                </li>
                                <li>
                                    <a href="#"><i class="shopType-sprite-icon shop-icon3"></i>坚果蜜钱</a>
                                </li>
                            </ul>
                            <ul class="row-3 shopType">
                                <li>
                                    <a href="#"><i class="shopType-sprite-icon shop-icon4"></i>进口食品</a>
                                </li>
                                <li>
                            </ul>
                            <ul class="row-3 shopType">
                                <li>
                                    <a href="#"><i class="shopType-sprite-icon shop-icon5"></i>生鲜水果</a>
                                </li>
                                <li>
                                    <a href="#"><i class="shopType-sprite-icon shop-icon6"></i>海鲜水产</a>
                                </li>
                                <li>
                                    <a href="#"><i class="shopType-sprite-icon shop-icon7"></i>肉禽蛋奶</a>
                                </li>
                            </ul>
                            <ul class="row-3 shopType">
                                <li>
                                    <a href="#"><i class="shopType-sprite-icon shop-icon11"></i>南北干货</a>
                                </li>
                                <li>
                                    <a href="#"><i class="shopType-sprite-icon shop-icon12"></i>米面杂粮</a>
                                </li>
                                <li>
                                    <a href="#"><i class="shopType-sprite-icon shop-icon13"></i>食用油</a>
                                </li>
                            </ul>
                            <ul class="row-3 shopType">
                                <li>
                                    <a href="#"><i class="shopType-sprite-icon shop-icon14"></i>传统滋补</a>
                                </li>
                                <li>
                                    <a href="#"><i class="shopType-sprite-icon shop-icon15"></i>营养健康</a>
                                </li>
                            </ul>
                            <ul class="row-3 shopType">
                                <li>
                                    <a href="#"><i class="shopType-sprite-icon shop-icon16"></i>白酒</a>
                                </li>
                                <li>
                                    <a href="#"><i class="shopType-sprite-icon shop-icon17"></i>啤酒</a>
                                </li>
                                <li>
                                    <a href="#"><i class="shopType-sprite-icon shop-icon18"></i>葡萄酒</a>
                                </li>
                                <li>
                                    <a href="#"><i class="shopType-sprite-icon shop-icon19"></i>国酒预调酒</a>
                                </li>
                                <li>
                                    <a href="#"><i class="shopType-sprite-icon shop-icon20"></i>饮料果汁</a>
                                </li>
                            </ul>
                            <ul class="row-3 shopType">
                                <li>
                                    <a href="#"><i class="shopType-sprite-icon shop-icon21"></i>休闲冲饮</a>
                                </li>
                                <li>
                                    <a href="#"><i class="shopType-sprite-icon shop-icon22"></i>国产茗茶</a>
                                </li>
                            </ul>
                            <ul class="row-3 shopType">
                                <li>
                                    <a href="#"><i class="shopType-sprite-icon shop-icon23"></i>家具家电</a>
                                </li>
                                <li>
                                    <a href="#"><i class="shopType-sprite-icon shop-icon24"></i>饰品配饰</a>
                                </li>
                                <li>
                                    <a href="#"><i class="shopType-sprite-icon shop-icon25"></i>其他</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="index-bto">
        <div class="list-row list-left">
            <ul class="row-2">
                <li><a href="#" class="index-btn active"><i class="sprite-icon"></i>首页</a></li>
                <li><a href="#" class="sort-btn"><i class="sprite-icon"></i>分类</a></li>
            </ul>
        </div>
        <div class="middle-btn">
            <a href="#" class=""><i class="sprite-icon"></i>伙拼</a>
        </div>
        <div class="list-row list-right">
            <ul class="row-2">
                <li><a href="#" class="car-btn"><span class="sprite-icon"></span>购物车</a></li>
                <li><a href="#" class="mine-btn"><span class="sprite-icon"><i></i></span>我的</a></li>
            </ul>
        </div>
    </div>
</div>

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/swiper.jquery.min.js"></script>
<script src="js/box.js"></script>
<script src="js/public.js"></script>
<script>
    $(function () {
        var myScroll = publicFuns.newIScroll("#wrapper");
        var mySwiper = publicFuns.newSwiper(".shopType-left", 3);
        mySwiper.update();
        //底部菜单
        $(".index-bto").find("a").click(function () {
            $(".index-bto").find("a").removeClass("active");
            $(this).addClass("active").css("opacity", "1");
        });

        //切换
        $(".shopType-menu").find("a").click(function () {
            var _i = $(this).index();
            var _tag = $(".shopType");
            $(this).addClass("active").siblings().removeClass("active");
            _tag.hide();
            _tag.eq(_i).fadeIn();
            $("h2.tips").find("span").text($(this).text().replace(/　/g, ""));
            myScroll.refresh();
        });

        $(window).resize(function () {
            $(".shopType-header").css("paddingLeft", ($(".shopType-area").width() + 10 + 10) + "px");
        }).trigger("resize");
    });
</script>
</body>
</html>